<template>
  <div>
    <h2>组件传值</h2>
    
    <!-- <GoodsList :uname="uname" :age="age" sex="男"></GoodsList> -->


    <GoodsList 
    v-for="item in list" 
    :key="item.id" 
    :id="item.id" 
    :pname="item.pname" 
    :price="item.price" 
    :info="item.info"
    @kanyidao="kanjia"
    ></GoodsList>
  </div>
</template>

<script>
import GoodsList from '@/components/GoodsList.vue'
export default{
  data(){
    return{
      username:'list',
      age:30,
      list: [
          { id: 101, pname: '超级无敌棒棒糖', price: 15, info: '好吃，再来一根' },
          { id: 171, pname: '超级解渴水果茶', price: 80, info: '好甜，真好喝' },
          { id: 191, pname: '超级好吃大鸡腿', price: 60, info: '可口，下饭~' }
        ]
    }
  },
   components:{
    GoodsList
  },
  methods:{
    kanjia(id){
      const row = this.list.find(item =>{
        return item.id === id
      })
      row.price--
    }
  }
}
</script>

<style></style>